#timing {
    @include flexbox();
    @include flex-direction(column);
    height: 100%;
    background: rgba(246,246,246,1);
    header {
        @include flexbox();
		height: 45px;
        line-height: 45px;
        color: #fff;
        background: linear-gradient(to right, #2fd4ac,  #2fd492);
        i {
            width: 30px;
            background: url(image/icon_return.png) no-repeat center;
            background-size: 100%;
        }
        div {
            @include flex();
            text-align: center;
            margin-right: 30px;
            font-size: 18px;
            color: rgba(51,51,51,1);
        }
    }
    ul {
        width: 100%;
        padding: 0 15px;
        background: #fff;
        overflow-y: scroll;
        li {
            @include flexbox();
            height: 55px;
            line-height: 55px;
            color: rgba(51,51,51,1);
            font-size: 15px;
            border-bottom: 1px solid rgb(229,229,229);
            h4 {
                padding-right: 8px;
                font-weight: normal;
            }
            span {
                @include flex();
                color: rgb(156,156,156);
                &.red {
                    color: rgb(229,50,45);
                }

            }
            a.punch {
                width:69px;
                text-align: center;
                height: 28px;
                line-height: 28px;
                margin: auto;
                color: rgb(229,50,45);
                border: 1px solid rgb(229,50,45);
                border-radius: 16px;
            }
            a.chargeDetails {
                height: 18px;
                line-height: 18px;
                margin: auto;
                border-bottom: 1px solid rgb(21,142,218);
                color: rgb(21,142,218);
            }
            &:last-child  {
                border: none;
            }
        }
    }
}